<template>
    <div class="role-box">
        <div class="search-role" v-if="!week && cfit">
          <div class="sc-item">
            <div class="sc-label">角色名：</div>
            <el-autocomplete
              class="sc-input"
              v-model="search"
              :fetch-suggestions="qs1"
              placeholder="请输入内容"
              @select="hs1"
              clearable
            ></el-autocomplete>
          </div>
        </div>

        <tittle-two :color="color">
            <div>{{book[dlt*3+week].book_name}}</div>
            <div v-if="week!==0" class="tfs-img">
                <div v-for="(bk, i) in mytfs" v-if="bk.name.indexOf(book[dlt*3+week].book_name)>-1">
                    <img :src="getSrc(i)" alt="">
                </div>
            </div>
        </tittle-two>
        <div class="list">
            <a target="_blank" v-for="(r, i) in wrole" v-if="filter(r)" :href="urlt.url+r['url'+ urlt.id]">
                <div class="box">
                    <img :src="require(`@/assets/js/${r.name}.png`)" alt="">
                    <div>{{r.name}}</div>
                </div>
            </a>
        </div>
    </div>
</template>

<script>
  import TittleTwo from '../temp/TittleTwo.vue'
  import tfs from '@/data/tfs'
  import * as com from '../../data/com'

  export default {
    name: "RoleBox",
    components: {
      TittleTwo,
    },
    props: {
      color: String,
      book: Array,
      week: Number,
      dlt: Number,
      wrole: Array,
      //是否筛选
      cfit: {
        type: Boolean,
        default() {
          return false
        }
      },
    },
    data() {
      return {
        mytfs: [],
        urlt: com.mhy,
        search: '',
      }
    },
    methods: {
      qs1(query, cb) {
        let res = [];
        res.push({value: '全部'})
        for(let i = 0; i < this.wrole.length; ++i) {
          res.push({value: this.wrole[i].name})
        }
        let results = query ? res.filter(this.createFilter(query)) : res;
        cb(results);
      },
      createFilter(query) {
        return (res) => {
          return (res.value.toLowerCase().indexOf(query.toLowerCase()) > -1);
        };
      },
      hs1(item) {
        this.search = item.value
      },
      filter(item) {
        let flag = false
        if(this.week === 0 || item.book === this.book[this.dlt*3 + this.week].book) {
          if(this.cfit) {
            if(this.search === '全部' || this.search === '' || this.search === item.name) {
              flag = true
            }
          }
          else flag = true
        }
        return flag
      },
      getSrc(index) {
        return require(`@/assets/tfs/${this.mytfs[index].name}.png`)
      },
      init() {
        const tstr = this.$route.query.type
        if(tstr && com[tstr]) {
          this.urlt = com[tstr]
        }
      }
    },
    created() {
      this.mytfs = tfs
      this.init()
      console.log("天赋书信息", tfs);
    }
  }
</script>

<style lang="less" scoped>
    .role-box {
      .search-role {
        display: flex;
        flex-wrap: wrap;
        .sc-item {
          display: flex;
          justify-content: center;
          flex-wrap: nowrap;
          width: 100%;
          max-width: 800px;
          .sc-label {
            width: 100%;
            max-width: 30%;
            display: flex;
            flex-direction: column;
            justify-content: center;
          }
          .sc-input {
            width: 100%;
          }
        }
      }
        .tfs-img {
            width: 40%;
            max-width: 240px;
            display: flex;
            justify-content: space-evenly;
        }
        .list {
            display: flex;
            flex-wrap: wrap;
            a {
                display: block;
                text-decoration: none;
                color: #000;
                margin-left: 2px;
                width: 16%;
                .box {
                    width: 100%;
                    img {
                        width: 100%;
                        border-radius: 10px;
                        max-width: 100px;
                    }
                    div {
                        width: 100%;
                        font-size: 12px;
                    }
                }
            }
        }
    }
</style>
